"use client"
import { useEffect, useState } from 'react';
export default function background(){
    const [position, setPostition] = useState({x : 0, y:0});

    useEffect(() => {
        const handleMouseMove = (e:MouseEvent) => {
            setPostition({
                x: e.clientX,
                y: e.clientY,
            })
        } //跟随鼠标移动
        window.addEventListener('mousemove', handleMouseMove);
        return () => {
            window.removeEventListener('mousemove', handleMouseMove);
          };
    },[])
   

    return (
            <div className="bg-black min-h-screen ">
            <div className=' position: absolute
            bg-gradient-to-r from-pink-500 to-violet-500 
            h-80 w-80 rounded-full  animate-rotate:50%
              opacity-70   blur-[12vmax]'
            style={{
                left:`${position.x}px`,
                top:`${position.y}px`,
                translate:'-50% -50%', 

             }}
            ></div>
            <div className='position: absolute h-full w-full  z-1 '></div>
            </div>
        
    )
}